<script>
  export default {
    onLaunch: function() {
      console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
      console.log('App Launch')
    },
    onShow: function() {
      console.log('App Show')
    },
    onHide: function() {
      console.log('App Hide')
    }
  }
</script>

<style lang="scss">
  /*每个页面公共css */
  @import '@/uni_modules/uni-scss/index.scss';
  /* #ifndef APP-NVUE */
  @import '@/static/customicons.css';

  @font-face {
    font-family: ceyyW02;
    font-weight: 400;
    src: url('https://at.alicdn.com/wf/webfont/78QZgt6nleC8/KzICK5-q3AunLkNIrxd7a.woff2') format('woff2'),
      url('https://at.alicdn.com/wf/webfont/78QZgt6nleC8/o10Uf4hmt9vlcBe1TrUz0.woff') format('woff2');
    font-display: swap;
  }

  // 设置整个项目

  page {
    background-color: #f5f5f5;
    font-family: 'ceyyW02';
  }


  /* #endif */
  .example-info {
    font-size: 14px;
    color: #333;
    padding: 10px;
  }

  // 轮播图
  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    height: 490rpx;
  }



  // 吃喝玩乐的大部分标题栏
  .title-text {
    display: flex;
    justify-content: space-between;

    .drink_more {
      margin-right: 30rpx;
      align-self: center;
      color: #aaa;
    }
  }

  .drink {
    .nearby {
      .drink_navchildren {

        .free-WaterfallFlow {
          width: 96%;
          column-count: 2;

          /* 分隔的列数 */
          .flex-wrap {
            display: inline-block;
            width: 98%;
            margin-left: 3%;
            margin-bottom: 3%;
            padding: 2%;
            padding-top: 5%;
            border: 0px solid #cc22b0;
            /* 边框 */
            box-shadow: 0 2px 2px rgba(34, 25, 25, 0.4);
            /* 框阴影 */


          }

          .flex-wrap image {
            width: 95%;
            margin: 0 10rpx;
          }

          .flex-wrap view:nth-child(2) {
            font-size: 15px;
            padding: 2% 0;
            color: #717171;
            display: flex;
            flex-direction: column;

            .shopname {
              font-size: 13rpx;
            }
          }

          .flex-wrap view:nth-child(3) {
            font-size: 13px;
            padding: 2% 0;
            color: #aaa;

            display: flex;
            justify-content: flex-end;
            align-items: center;
          }


        }

        .drink_nearby_list {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;

          .drink_nearby_item {
            width: 45%;
            height: 400rpx;
            padding: 10rpx 10rpx;

            .item_picture {
              width: 100%;
              height: 400rpx;
              border-radius: 10rpx;
              display: flex;
              color: #ebebeb;
              align-items: flex-end;


              .name_distance {
                padding: 0 10rpx;
                padding-bottom: 10rpx;

                .name {}

                .bottom {
                  display: flex;
                  font-size: 15rpx;
                  align-items: flex-end;

                }
              }

              .right {
                width: 30%;
                display: flex;
                justify-content: center;
                margin-bottom: 20rpx;
                margin-left: 30rpx;

                .button {
                  color: #9fb5d8;
                  font-family: '宋体';
                  padding: 10rpx;
                  padding-top: 5rpx;
                  padding-bottom: 5rpx;
                }


                font-size: 15rpx;

                .distance {
                  align-self: center;
                }
              }

              // 菜谱

            }



          }

          // 菜谱
          .recipe_item {
            width: 45%;
            height: 500rpx;
            padding: 10rpx 10rpx;

            .item_picture {
              width: 100%;
              height: 400rpx;
              border-radius: 10rpx;
              display: flex;
              align-items: flex-end;

              .right {
                width: 100%;
                display: flex;
                justify-content: flex-end;
                margin-bottom: 25rpx;
                margin-right: 30rpx;

                .recipe_button {
                  margin: 0;
                }
              }

              .name_distance {
                padding: 0 10rpx;
                padding-bottom: 10rpx;


                .bottom {
                  display: flex;
                  font-size: 15rpx;
                  align-items: flex-end;

                }
              }




            }

            .name_distance {
              .bottom {
                font-size: 13rpx;
                color: #aaa;
              }
            }

          }


        }


      }
    }

    .drink_rank {}
  }
</style>
